<!-- insight.html -->
<!DOCTYPE html>
<html>
<head>
    <title>客户洞察平台</title>
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 模块A - 标题栏 -->
    <div class="header">
        <h1>客户洞察平台</h1>
        <div class="nav-links">
            <button id="home-btn"><i class="fas fa-home"></i> 首页</button>
            <button id="favorite-btn"><i class="fas fa-star"></i> 收藏</button>
            <button id="settings-btn"><i class="fas fa-cog"></i> 设置</button>
            <button href="#"><i class="fas fa-user"></i> 用户中心</button>
            <ul class="dropdown-menu" id="settings-dropdown" style="display: none;">
                <li onclick="adjustModelSettings('temperature')">调整模型温度</li>
                <li onclick="adjustModelSettings('other')">其他设置</li>
            </ul>
            <ul class="dropdown-menu" id="favorite-dropdown" style="display: none;">
                <li onclick="showFavoriteInsights()">收藏当前洞察</li>
                <li onclick="showHistoryInsights()">历史洞察</li>
            </ul>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-container">
        <!-- 模块B - 智能问答 -->
        <div class="chat-panel">
            <div class="chat-history" id="chat-history">
                <div class="chat-message system-message">
                    <i class="fas fa-robot" style="color: #4169E1; margin-right: 8px;"></i>
                    您好！请问需要分析哪些客户群体？
                </div>
            </div>
            <div class="user-input">
                <div class="suggestions">
                    <div class="suggestions-title">猜你想问：</div>
                    <div class="suggestions-buttons">
                        <span onclick="fillInput('家庭用户群体分析')">家庭用户群体分析</span>
                        <span onclick="fillInput('高价值用户分析')">高价值用户分析</span>
                        <span onclick="fillInput('流失风险用户分析')">流失风险用户分析</span>
                        <span onclick="fillInput('新用户群体分析')">新用户群体分析</span>
                        <span onclick="fillInput('活跃用户群体分析')">活跃用户群体分析</span>
                    </div>
                </div>
                <input type="text" id="question-input" placeholder="输入您的分析需求...">
                <button class="send-btn" onclick="handleQuestion()">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>

        <!-- 模块C - 可视化分析 -->
        <div class="graph-panel">
            <!-- 分析框1 -->
            <div class="analysis-box">
                <div class="box-header" onclick="toggleBox(1)">
                    <span class="box-title">家庭用户群体分析</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="box-content">
                    <div class="graph-section">
                        <div id="network1"></div>
                    </div>
                    <div class="advice-section">
                        <h4>决策建议：</h4>
                        <ul>
                            <li>全家享套餐升级</li>
                            <li>儿童手表定位服务</li>
                            <li>智能组网家庭安防套装</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 分析框2 -->
            <div class="analysis-box">
                <div class="box-header" onclick="toggleBox(2)">
                    <span class="box-title">高价值用户分析</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="box-content" style="display: none;">
                    <div class="graph-section">
                        <div id="network2"></div>
                    </div>
                    <div class="advice-section">
                        <h4>决策建议：</h4>
                        <ul>
                            <li>VIP专属客服通道</li>
                            <li>优先5G升级权益</li>
                            <li>商务差旅套餐推荐</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 新增分析框3 -->
            <div class="analysis-box">
                <div class="box-header" onclick="toggleBox(3)">
                    <span class="box-title">流失风险用户分析</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="box-content" style="display: none;">
                    <div class="graph-section">
                        <div id="network3"></div>
                    </div>
                    <div class="advice-section">
                        <h4>决策建议：</h4>
                        <ul>
                            <li>定期回访关怀</li>
                            <li>优惠券激励</li>
                            <li>个性化服务推荐</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 新增分析框4 -->
            <div class="analysis-box">
                <div class="box-header" onclick="toggleBox(4)">
                    <span class="box-title">新用户群体分析</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="box-content" style="display: none;">
                    <div class="graph-section">
                        <div id="network4"></div>
                    </div>
                    <div class="advice-section">
                        <h4>决策建议：</h4>
                        <ul>
                            <li>新手引导计划</li>
                            <li>首月优惠活动</li>
                            <li>社区互动推广</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 新增分析框5 -->
            <div class="analysis-box">
                <div class="box-header" onclick="toggleBox(5)">
                    <span class="box-title">活跃用户群体分析</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="box-content" style="display: none;">
                    <div class="graph-section">
                        <div id="network5"></div>
                    </div>
                    <div class="advice-section">
                        <h4>决策建议：</h4>
                        <ul>
                            <li>积分奖励计划</li>
                            <li>会员特权活动</li>
                            <li>社交分享激励</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="common_script.js"></script>
    <script src="insight_script.js"></script>
</body>
</html>